<!DOCTYPE html></!DOCTYPE>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
			
		*{
			margin: 0,auto;
			padding: 0;
		}
		#box{
			width: 500px;
			height: 500px;
			background-image: url(时钟001.png);
			background-size: cover;
			border-radius: 250px;
			margin: 0,auto;
			text-align: center;
			position: relative;
		}
			
	/* 	#box #hour{
			margin: 50%;
			height:150px;
			width: 10px;
			background-color: #000000;
			border:2px,soild, #999;
		}
		#box #min{
			position: absolute;
			height:150px;
			width: 10px;
			background-color: #000000;
			border:2px,soild, #999;
		} */
		#box #sec-warpper{
			width:500px;
			height: 500px;
			/* background-color: aqua; */
			margin: 0,auto;
			animation: run 60s infinite;
			position: absolute;
		}
		#box  #sec-warpper #sec{
			height:250px;
			width: 4px;
			background-color: red;
			border:2px,soild, #999;
			margin: 0 auto;
			maigin-left:250px;
			
			
		}
		#box #hour-warpper{
			width:400px;
			height:400px;
			/* background-color: aqua; */
			margin: 0 auto;
			margin-left: 10%; 
			margin-top:10%;
			animation: run 21600s infinite;
			position: absolute;
		}
		#box  #hour-warpper #hour{
			height:200px;
			width: 4px;
			background-color: black;
			border:2px,soild, #999;
			margin: 0 auto;
			maigin-left:250px;
			
		}
		#box #min-warpper{
			position: absolute;
			width:500px;
			height: 500px;
			/* background-color: aqua; */
			margin: 0 auto;
			animation: run 3600s infinite;
		}
		#box  #min-warpper #min{
			height:250px;
			width: 4px;
			background-color: black;
			border:2px,soild, #999;
			margin: 0 auto;
			
			
		}
		@keyframes run{
			from{
				transform: rotateZ(0);
			}
			to{
				transform: rotateZ(360deg);
			}
		}
		
	</style>
	<body>
		<div id="box">
			<div id="sec-warpper">
				<div id="sec"></div>
			</div>
			<div id="min-warpper">
				<div id="min"></div>
			</div>
			<div id="hour-warpper">
				<div id="hour"></div>
			</div>
			
			
		</div>
	</body>
</html>
